<style scoped>
    .history {
    }
    .rili-box{
      width: 7rem;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: 15px;
      color: #242A43;
      padding: 0 0.5rem;
      background: white;
    }
  .his-biaoji{
    display: flex;
    flex-direction: row;
    height: 1rem;
    align-items: center;
    font-size: 15px;
    color: #272C46;
    justify-content: center;
  }
  .bg1{
    background-image: linear-gradient(0deg, #2ED69F 0%, #42DED8 100%);
    position: relative;
    left: 0.15rem;
    top: 0.1rem;
  }
  .bg2{
    background-image: linear-gradient(-180deg, #FFCF33 0%, #FFAB19 100%);
    position: relative;
    left: 0.15rem;
    top: 0.1rem;
  }
  .bg3{
    background-image: linear-gradient(-90deg, #3CBCFF 0%, #2094FA 100%);
    position: relative;
    left: 0.1rem;
    top: 0.1rem;
  }
  .yuan{
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 100%;
    margin-right: 0.2rem;
  }
  .his-text{
    margin-left: 0.1rem;
    margin-right: 0.1rem;
  }
  .his-st{
    width: 90%;
    height: 1.32rem;
    align-items: center;
    display: flex;
    flex-direction: row;
    -moz-box-shadow:0px 4px 15px #D7E5FA; -webkit-box-shadow:0px 4px 15px #D7E5FA; box-shadow:0px 4px 15px #D7E5FA;
    background: white;
    margin: 0.2rem auto;
  }
  .his-st img{
    width: 0.33rem;
    height: 0.28rem;
    font-size: 20px;
    margin-left: 0.44rem;
  }
  .his-desc{
    font-size: 16px;
    color: #333333;
    margin-left: 0.3rem;
  }
  .select-box{
    height: 0.84rem;
    font-size: 15px;
    color: #363636;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: white;
    border-bottom: 1px solid #F8FAFA;

  }
  .select-box img{
    width: 0.4rem;
    height: 0.4rem;
    display: block;
  }
  .rili-week,.rili-data{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rili-data{
    padding-bottom: 0.3rem;
    width: 7rem;
    margin-top: -0.3rem;
  }
  .rili-week div{
    width: 0.48rem;
    height: 0.48rem;
    margin:0.22rem 0.24rem;
    text-align: center;
  }
  .rili-data > div{
    width: 0.48rem;
    height: 0.48rem;
    margin:0.22rem 0.24rem;
  }
  .yuan2{
    border-radius:50%;
    width: 0.2rem;
    height: 0.2rem;
  }
  .today{
    width: 0.48rem !important;
    height: 0.48rem !important;
    background: red;
    border-radius:50% ;
    color: white;
    line-height: 0.48rem;
    text-align: center;
  }
  .neirong{
    text-align: center;
  }
  .zanwu{
    width: 2rem;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
  }
  .zanwu img{
    width: 100%;
  }

</style>
<template>
    <div class="history">
        <div class="select-box">
          <img src="../assets/img/left.png" style="margin-left: 0.26rem" @click="m_jian"/>
          <!--<input  type="text" placeholder="选择性别" readonly  style="position: relative; width: 90%" v-model="sex" value="sex">-->
          <p class="btn" style="flex: 1;text-align: center">{{years}}-{{months}}</p>
          <img src="../assets/img/right.png" style="margin-right: 0.26rem" @click="m_add"/>
        </div>
        <div class="rili-box">
          <div class="rili-week">
            <div v-for="week in datatitle">{{week}}</div>
          </div>
          <div class="rili-data">
            <div v-for="(day,index) in data" @click="selectDay(index)" :class="day==today?'today':'' ">
              <div class="neirong">{{day}}</div>
              <div class="yuan2 bg1" v-for="yuan in return_data" v-if="yuan.time==day &&yuan.is_close=='jinri'"></div>
              <div class="yuan2 bg2" v-for="yuan in return_data" v-if="yuan.time==day &&yuan.is_close=='0'"></div>
              <div class="yuan2 bg3" v-for="yuan in return_data" v-if="yuan.time==day &&yuan.is_close=='1'"></div>
            </div>
          </div>

        </div>
        <div class="his-biaoji">
          <div class="yuan bg1" style="margin-top: -0.2rem"></div><div class="his-text">今日</div>
          <div class="yuan bg2" style="margin-top: -0.2rem"></div><div class="his-text">未答</div>
          <div class="yuan bg3" style="margin-top: -0.2rem"></div><div class="his-text">已答</div>
        </div>
        <div v-if="getjinriti">
          <div class="his-st">
            <img src="../assets/img/video.png">
            <div class="his-desc">2019药学考点精讲班-药学知识</div>
          </div>
          <div class="his-st">
            <img src="../assets/img/jiexi_icon.png">
            <div class="his-desc">2019药学考点精讲班-药学知识</div>
          </div>
        </div>
        <div v-else>
          <div class="zanwu">
            <img src="../assets/img/zanwu.png">
            <p>暂无数据</p>
          </div>

        </div>

      <awesome-picker
        ref="picker1"
        :textTitle="picker1.textTitle"
        :data="picker1.data"
        :anchor="picker1.anchor"
        @confirm="handlePicker1Confirm">
      </awesome-picker>
    </div>
</template>

<script>
    import Qs from 'qs'
    import axios from 'axios'
    const data1 = [ '2018', '2019', '2020','2021','2022','2023','2024']
    const data2 = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    export default {
        name: '',
        data() {
            return {
              return_data:[{new_day:2,style:'jinri'},{new_day:12,style:'weida'},{new_day:28,style:'yida'}],
              data_index:'',//在日期里补天数 判断天数的下标
              next_index:'',
              picker1: {
                anchor: [],
                textTitle: '请选择年月',
                data: [data1, data2]
              },
              loading:true,
              days:'',
              jinri:'',
              today:'',
              datatitle:['一','二','三','四','五','六','日'],
              data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
              ,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
              years:'2018',
              months:'11',
              sendData:'',//获取日期的时间
              sendData2:'',
              getjinriti:'',
              jinridata:'' //判断今日
            }
        }, created() {

        }, mounted() {
          this.getHistory();
        // var parmas2={
        //   qid:1,
        //   uid:1,
        //   count:15,
        //   fail_count:10,
        //   fail_id:'1,2',
        //   fail_answer:'我的1,我的2'
        // };
        // var pa3=Qs.stringify(parmas2);
        // axios.post('http://test.jiaoxue.com/question/index/closeIn',pa3)
        //   .then(response => {
        //     // response=JSON.parse(response)
        //     console.log(response.data[0])
        //   })
        //   .catch(function (error) {
        //     alert('网络错误')
        //   });

        // axios.post('http://test.jiaoxue.com/question/index/index')
        //   .then(response => {
        //     // response=JSON.parse(response)
        //     console.log(response.data[0])
        //   })
        //   .catch(function (error) {
        //     alert('网络错误')
        //   });


            var date = new Date();
            var years = date.getFullYear();
            var months = date.getMonth() + 1;
            this.years=years;
            this.months=months;
            var data = date.getDate();
            this.today=99;
            this.jinri=data;
            this.rilifun(years,months);
            this.sendData=years+'-'+months;
        }, methods: {
        getHistory(){
          var date = new Date();
          var years = date.getFullYear();
          var months = date.getMonth() + 1;
          console.log(months,this.months)
          if(years==this.years&&months==this.months){
            this.jinridata=true
          }else {
            this.jinridata=false
          }

          var that =this;
          var data={
            uid:1,
            month:this.sendData
          }
          var pa3=Qs.stringify(data);
          axios.post('http://test.jiaoxue.com/question/index/history',pa3)
            .then(response => {
              // response=JSON.parse(response)
              console.log(response.data.data)
              if(response.data.code==200){
                that.loading=false;
                var arr=[];
                for(var i in response.data.data){
                  arr.push(response.data.data[i])
                }
                that.return_data=arr;
                var obj={
                  time:that.jinri,
                  is_close:'jinri'
                }
                that.return_data.unshift(obj)
               // console.log(that.jinri,'123123')
                // console.log(that.return_data)
              }else {
                that.loading=false
                // alert('网络有错，或者参数不合法')
              }
              // console.log(response)
            })
            .catch(function (error) {
              // alert('网络错误')
            });
        },
        m_add:function(){

          this.months=Number(this.months)+1;
          if(this.months==13){
            this.months=1;
            this.years=Number(this.years)+1;
          }
          this.rilifun(this.years,this.months);
           this.getHistory()      //500代表 无数据

        },
        m_jian:function(){
          this.months=Number(this.months)-1;
          if(this.months==0){
            this.months=12;
            this.years=Number(this.years)-1;
          }
          this.rilifun(this.years,this.months);
           this.getHistory()  //500代表无数据
        },
        showPicker1 () {
          this.$refs.picker1.show()
        },
        handlePicker1Confirm (v) {
          this.picker1.anchor = v
          this.value = v ? JSON.stringify(v) : null;
          this.value=JSON.parse(this.value)
          console.log(this.value)
          this.years=this.value[0].value;
          this.months=this.value[1].value;
          console.log(this.years,this.months)
        },
        selectDay:function (index) {
          var that =this
          if(this.data[index]!=''){
            console.log(this.data[index])
            this.today=this.data[index];
            this.sendData2=this.years+'-'+this.months+'-'+this.today;
            var data={
              day:this.sendData2
            }
            var pa3=Qs.stringify(data);
            axios.post('http://test.jiaoxue.com/question/index/getQuestionByDay',pa3)
              .then(response => {
                // response=JSON.parse(response)
                console.log(response.data.code)
                if(response.data.code==200){
                  that.loading=false;
                  that.getjinriti=true
                  console.log(that.getjinriti)
                }else {
                  that.getjinriti=false
                  // that.loading=false
                  // alert('网络有错，或者参数不合法')
                }
                // console.log(response)
              })
              .catch(function (error) {
                // alert('网络错误')
              });

          }
            },
        rilifun:function (years,months) {
              var that =this;
              var all_day=42;
              var days='';
              console.log(years,months)
              rili(years,months)
              function rili(years,months) {
                //判断闰年
                function runNian(_year) {
                  if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {
                    return true;
                  }
                  else { return false; }
                }
                //判断某年某月的1号是星期几
                function getFirstDay(_year,_month) {
                  var allDay = 0, y = _year-1, i = 1;
                  allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) + 1;
                  for ( ; i<_month; i++) {
                    switch (i) {
                      case 1: allDay += 31; break;
                      case 2:
                        if(runNian(_year)) { allDay += 29; }
                        else { allDay += 28; }
                        break;
                      case 3: allDay += 31; break;
                      case 4: allDay += 30; break;
                      case 5: allDay += 31; break;
                      case 6: allDay += 30; break;
                      case 7: allDay += 31; break;
                      case 8: allDay += 31; break;
                      case 9: allDay += 30; break;
                      case 10: allDay += 31; break;
                      case 11: allDay += 30; break;
                      case 12: allDay += 31; break;
                    }
                  }
                  days=allDay%7;
                  if(days==0){
                    days=7
                  }
                  return allDay%7;
                }
                //本月今天是星期几
                var data_index= getFirstDay(years,months);
                that.data_index=data_index-1;
                //本月有多少天
                var daynum = getDaysInOneMonth(years,months);
                //上个月有多少天
                var prv_days=getDaysInOneMonth(years,months-1);

                var arr=[];
                for(var k=1;k<=daynum;k++){
                  arr.push(k)
                }
                // 第一天的值
                var fristday=prv_days-data_index+2;
                var arr2=[]
                for(;fristday<=prv_days;fristday++){
                  arr2.push("")
                }
                var c=arr2.concat(arr)
                that.data=c;

                //补天数后面的值
                if(data_index>1){
                  var arr3=[];
                  all_day=42;
                  var after_day=all_day-daynum-data_index+1;
                  // console.log(after_day,'ppp')
                  for(var p=1;p<=after_day;p++){
                    that.data.push("")
                  }
                }else {
                  all_day=35
                }

                function getDaysInOneMonth(year, month){
                  month = parseInt(month,10);
                  var d= new Date(year,month,0);  //这个是都可以兼容的
                  var date = new Date(year+"/"+month+"/0")   //IE浏览器可以获取天数，谷歌浏览器会返回NaN
                  return d.getDate();
                }
              }
            }
      }
    }
</script>
